<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
import { getBlogArticleDetail } from '../api';
import { onMounted } from 'vue';

interface IDataModal {
  id: string;
  title: string;
  author: string;
  content: string;
  cover: string;
  type: number;
  status: number;
  createTime: string;
  recentReadingTime: number;
}

interface IResultModal {
  code: number;
  data: IDataModal[];
  msg: string;
}

const srcValues = ref<string[]>([]);

const articleDetail = ref<IDataModal | null>();

const onClickLeft = () => {
  router.go(-1);
}

onMounted(() => {
  getBlogArticleDetail(route.query.id as string).then((res: IResultModal) => {
    if (res.code === 1) {
      articleDetail.value = res.data[0];
      var regex = /<img[^>]*\ssrc\s*=\s*["']?([^'">]+)["']?[^>]*>/g;
      var matches = articleDetail.value.content.match(regex);
      // 提取每个匹配项中的src值
      srcValues.value.push(articleDetail.value.cover);
      if (matches) {
        for (var i = 0; i < matches.length; i++) {
          var match = matches[i];
          // 使用正则表达式提取src值
          var srcMatch = match.match(/src=["']?([^"'>]+)["']?/);
          if (srcMatch && srcMatch[1]) {
            srcValues.value.push(srcMatch[1]);
          }
        }
      }
      
    }
  })
})

const active = ref(0);
</script>

<template>
  <main>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" :title="articleDetail?.title" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in srcValues" :key="item">
        <img v-lazy="item" style="width: 100%;" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="content">
      <h3>{{ articleDetail?.title }}</h3>
      <div style="overflow: hidden;" v-html="articleDetail?.content"></div>
    </div>

  </main>
</template>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.content {
  padding: 1rem;
}
</style>
